import { useState, useCallback, useEffect } from 'react'
import { Card, Flex, Button, WhiteSpace, WingBlank } from 'antd-mobile'
import { message, Descriptions } from 'antd'
import router from 'umi/router'
import QRCode from 'qrcode.react'

import { mapQuery } from '@/utils'
import services from '@/services'
import styles from './index.scss'

const { SBActive, SBCOrder, SBQOrder } = services

export default () => {
  const openId = localStorage.getItem('openId')
  const { code, today } = mapQuery()
  const [detail, setDetail] = useState({})

  useEffect(() => { // 查询预约号信息
    const data = {
      openId,
      code
    }
    SBQOrder({
      sign: `${data}$$##1234ech**`.MD5(32),
      data
    })
      .then(res => {
        if (res.success) {
          setDetail(res.data)
        }
      })
  }, [])

  const onActiveClick = useCallback(() => { // 点击激活回调
    const data = {
      openId,
      longitude: '',
      code,
      latitude: ''
    }
    SBActive({
      sign: `${data}$$##1234ech**`.MD5(32),
      data
    })
      .then(res => {
        if (res.success) {
          message.success(res.data)
          router.replace('/history')
        }
      })
  }, [])

  const onCancelClick = useCallback(() => { // 点击取消激活回调
    const data = {
      openId,
      code
    }
    SBCOrder({
      sign: `${data}$$##1234ech**`.MD5(32),
      data
    })
      .then(res => {
        if (res.success) {
          message.success(res.data)
          router.replace('/history')
        }
      })
  }, [])

  const { regdate, branch, item, state, qrCode } = detail

  return (
    <div>
      <div className='t-left mgl-8'>预约信息</div>
      <Card className={styles.card}>
        <Flex justify='center'>
          <div>
            {
              qrCode &&
              <QRCode
                value={qrCode}  // value参数为生成二维码的链接
                size={100} // 二维码的宽高尺寸
                fgColor="#000000"  // 二维码的颜色
              />
            }
          </div>
          <div className={styles.desc}>
            <Descriptions>
              <Descriptions.Item label="预约时间">{regdate}</Descriptions.Item>
              <Descriptions.Item label="预约网点">{branch}</Descriptions.Item>
              <Descriptions.Item label="预约事项">{item}</Descriptions.Item>
              <Descriptions.Item label="预约状态">{
                state === 0
                  ? '未激活'
                  : (
                    state === 1
                      ? '已激活'
                      : '过期'
                  )
              }</Descriptions.Item>
            </Descriptions>
          </div>
        </Flex>
      </Card>
      <WhiteSpace />
      <WingBlank>
        <div className='t-left'>
          <div>请于预约当日及时到业务大厅现场进行号票激活（必须抵达网点后方可激活），激活方式为：在海淀社保微信公众号中点击“我的”</div>
        </div>
        <WhiteSpace />
        {
          today && (
            today === 'false'
              ? <Button type='primary' onClick={onCancelClick}>取消激活</Button>
              : <Button type='primary' onClick={onActiveClick}>立即激活</Button>
          )
        }
      </WingBlank>
    </div>
  )
}
